<template>
  <div class="home-container">
    <div class="middle-box">
      <div class="m-left">
        <ItemBox :title="'设备类型统计'">
          <template #content>
            <StatisticsChart
              :id="'StatisticsChart'"
              :width="'100%'"
              :height="'100%'"
              :value="Equipment"
            ></StatisticsChart>
          </template>
        </ItemBox>
      </div>
      <div class="m-right">
        <ItemBox :title="'设备故障率统计'">
          <template #content>
            <FailureChart
              :id="'FailureChart'"
              :width="'100%'"
              :height="'100%'"
              :value="Failurerate"
            ></FailureChart>
          </template>
        </ItemBox>
      </div>
    </div>
    <div class="middle-box">
      <div class="m-left">
        <ItemBox :title="'设备厂家统计'">
          <template #content>
            <ManufacturerChart
              :id="'ManufacturerChart'"
              :width="'100%'"
              :height="'100%'"
              :value="manufacturer"
            ></ManufacturerChart>
          </template>
        </ItemBox>
      </div>
      <div class="m-right">
        <ItemBox :title="'权属单位设备与故障数统计'">
          <template #content>
            <FaultChart
              :id="'FaultChart'"
              :width="'100%'"
              :height="'100%'"
              :value="GetUnitInfo"
            ></FaultChart>
          </template>
        </ItemBox>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ItemBox from '@/components/ItemBox'
import StatisticsChart from './StatisticsChart'
import FailureChart from './FailureChart.vue'
import ManufacturerChart from './ManufacturerChart.vue'
import FaultChart from './FaultChart.vue'
import {
  EquipmentType,
  EquipmentFailurerate,
  EquipmentGetUnitInfo,
  Equipmentmanufacturer
} from '@/api/equipment'

const Equipment = ref()
const Failurerate = ref()
const manufacturer = ref()
const GetUnitInfo = ref()
const list = async () => {
  await EquipmentType().then((res) => {
    Equipment.value = res
  })
  await EquipmentFailurerate().then((res) => {
    Failurerate.value = res
  })
  await EquipmentGetUnitInfo().then((res) => {
    GetUnitInfo.value = res
  })
  await Equipmentmanufacturer().then((res) => {
    manufacturer.value = res
  })
}
list()
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .middle-box {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    display: flex;
    column-gap: 20px;
    margin-bottom: 20px;
    .m-left {
      width: 50%;
      height: 100%;
      background: #ffffff;
      border-radius: 6px;
      position: relative;
    }
    .m-right {
      width: 50%;
      height: 100%;
      border-radius: 6px;
      background: #ffffff;
    }
  }
}
</style>
